<template>
	<view>
		<view class="container">
			<view class="head">
				<view class="sin">
					<text>歌手:</text>
					<text class="option" @click="tets=1,singer=-1" :class="{active:tets==1}">全部</text>
					<text class="option" @click="tets=2,singer=1" :class="{active:tets==2}">男歌手</text>
					<text class="option" @click="tets=3,singer=2" :class="{active:tets==3}">女歌手</text>
					<text class="option" @click="tets=4,singer=3" :class="{active:tets==4}">乐队</text>
				</view>
				<view class="reg">
					<text>地区:</text>
					<text class="option" @click="reg=1,region=-1" :class="{active:reg==1}">全部</text>
					<text class="option" @click="reg=2,region=7" :class="{active:reg==2}">华语</text>
					<text class="option" @click="reg=3,region=96" :class="{active:reg==3}">欧美</text>
					<text class="option" @click="reg=4,region=8" :class="{active:reg==4}">日本</text>
					<text class="option" @click="reg=5,region=16" :class="{active:reg==5}">韩国</text>
					<text class="option" @click="reg=6,region=0" :class="{active:reg==6}">其他</text>
				</view>
			</view>
			<view class="wb">
				<uni-grid :showBorder="false" :column="2">
					<uni-grid-item class="kk" v-for="(s,i) in singerName" :key="i">
						<image @click="gotosing(s.name,s.id)" class="pic" :src="s.picUrl" mode="widthFix" />
						<text @click="gotosing(s.name,s.id)" class="mz">{{s.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		base,
		artistList
	} from '../../service'
	export default {
		data() {
			return {
				tets: 1,
				reg: 1,
				singerName:[],
				singer: -1,
				region: -1,
				singerNumber:0,
				// singerId:0
			}
		},
		async onLoad() {
			let data = await artistList(this.singer, this.region,this.singerNumber)
			this.singerName = data.artists
			console.log(this.singerName)
		},
		mounted() {},
		methods: {
			gotosing(singerName,singerId) {
				uni.navigateTo({
					url: `/pages/singer/singer?singerName=${singerName}&singerId=${singerId}`
				})
			},
		},
		watch: {
			async singer(now, old) {
				this.singerNumber=0
				let data = await artistList(this.singer, this.region,this.singerNumber)
				this.singerName = data.artists
				console.log(this.singerName)
			},
			async region(now, old) {
				this.singerNumber=0
				let data = await artistList(this.singer, this.region,this.singerNumber)
				this.singerName = data.artists
				console.log(this.singerName)
			}
		},
		async onReachBottom() {
			this.singerNumber+=30
				let data = await artistList(this.singer, this.region,this.singerNumber)
					this.singerName.push(...data.artists)
				console.log(this.singerName)
		}
	}
</script>

<style lang="scss">
	.head {

		// flex-direction: row;
		.sin {
			flex-direction: row;
			align-items: center;
		}

		.reg {
			flex-direction: row;
			align-items: center;
		}

		.option {
			border-radius: 200px;
			padding: $uni-spacing-col-sm $uni-spacing-row-sm;
			margin: $uni-spacing-col-sm $uni-spacing-row-sm;
			background-color: $uni-text-color-disable;
		}

		.active {
			color: white;
			background-color: $uni-color-primary;
		}
	}

	.wb {
		.kk {
			padding: $uni-spacing-col-sm $uni-spacing-row-sm;

			.pic {
				width: 100%;
			}

			text {
				position: absolute;
				color: white;
			}

			.mz {
				bottom: 5%;
				left: 4%;
				color: black;
			}

		}
	}
</style>
